<template>
  <div class="w-screen h-screen flex-center">
    <!-- 背景 -->
    <div class="w-screen h-screen fixed top-0 left-0 -z-10">
      <ElImage
        class="w-h-full"
        fit="cover"
        src="/images/bg.webp"
      ></ElImage>
    </div>
    <!-- 内容块 -->
    <div
      class="main"
      @mouseleave="actionIndex = -1"
    >
      <div
        class="main__action relative"
        v-for="(item, index) in actions"
        :parentState="actionIndex != -1 ? 'active' : 'default'"
        :state="actionIndex == index ? 'active' : 'default'"
        @mouseenter="actionIndex = index"
        @click="handleClickAction(item)"
      >
        {{ item.text }}
        <div class="absolute top-0 left-0 w-h-full -z-10">
          <ElImage
            class="w-h-full absolute top-0 left-0"
            fit="cover"
            :src="item.img"
          ></ElImage>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
definePageMeta({
  layout: "uni-layout",
});

const actionIndex = ref(0);
const actions: { text: string; url: string; img: string }[] = [
  { text: "数据采集", url: "/", img: "/images/RobotAcquisition.webp" },
  {
    text: "BI看板",
    url: "bi",
    img: "/images/RobotBI.webp",
  },
  { text: "风险沙盒", url: "/", img: "/images/RobotSendbox.webp" },
];

const handleClickAction = async (actionOption: {
  text: string;
  url: string;
  img: string;
}) => {
  if (actionOption.url == "/") {
    ElNotification({
      title: "拒绝访问/权限不够",
      type: "error",
    });
  }

  if (actionOption.url == "bi") {
    navigateTo("https://www.finebi.com/", {
      open: {
        target: "_blank",
      },
    });

    return;
  }

  await navigateTo(actionOption.url);
};
</script>

<style lang="scss" scoped>
// 定义 mixin (通常在单独文件)
@mixin b($block) {
  .#{$block} {
    @content;
  }
}

@mixin e($element) {
  &__#{$element} {
    @content;
  }
}

@mixin m($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include b(main) {
  width: 80vw;
  height: 80vmin;
  // @apply grid grid-cols-2 grid-rows-2 gap-1;
  @apply flex gap-4;
  @include e(action) {
    @apply flex justify-center items-center flex-1;
    // background-color: #f4f5f6;

    transition: all 0.3s ease;
    writing-mode: vertical-rl;

    @apply text-3xl;
    font-family: "HYShangWeiShouShu";
    &[parentState="active"] {
      opacity: 0.7;
      transform: scale(0.98);
      filter: grayscale(50%);
    }
    &[state="active"] {
      // background-color: #d1e7dd;
      opacity: 1;
      color: #0f5132;
      transform: scale(1.02);
      filter: grayscale(00%);
      box-shadow: 0px 0px 12px 3px rgba($color: #000000, $alpha: 0.1);
      cursor: pointer;
    }

    &:hover {
    }
  }
}
</style>
